<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>质量分析 - 转炉终点预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/unified.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/sidebar-theme.css">
    <link rel="stylesheet" href="styles/scale-fix.css">
    <link rel="stylesheet" href="styles/modal-dialog.css">
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-logo">
                <i class="fas fa-industry"></i>
            </div>
            <div class="sidebar-title">转炉终点预测系统</div>
        </div>
        <div class="sidebar-menu">
            <div class="sidebar-menu-title">主导航</div>
            <ul>
                <li><a href="index.html"><i class="fas fa-home"></i>首页</a></li>
                
                <li><a href="production-monitor.html"><i class="fas fa-chart-line"></i>生产监控</a></li>
                <li><a href="history-data.html"><i class="fas fa-history"></i>历史数据</a></li>
                <li><a href="quality-analysis.html" class="active"><i class="fas fa-flask"></i>质量分析</a></li>
            </ul>
            
            <div class="sidebar-menu-title">模型管理</div>
            <ul>
                <li><a href="model-details.html"><i class="fas fa-brain"></i>模型详情</a></li>
                <li><a href="model-config.html"><i class="fas fa-cogs"></i>模型配置</a></li>
                <li><a href="model-performance.html"><i class="fas fa-chart-bar"></i>模型性能</a></li>
                <li><a href="model-update.html"><i class="fas fa-sync-alt"></i>模型更新</a></li>
            </ul>
            
            <div class="sidebar-menu-title">系统设置</div>
            <ul>
                <li><a href="system-settings.html"><i class="fas fa-cog"></i>系统设置</a></li>
                <li><a href="online-analysis.html"><i class="fas fa-chart-bar"></i>在线分析</a></li>
            </ul>
        </div>
        <div class="sidebar-footer">
            <i class="fas fa-info-circle"></i>
            <span>系统版本：v2.5.3</span>
        </div>
    </div>

    <!-- 侧边栏遮罩层 -->
    <div class="sidebar-overlay"></div>

    <div class="container">
        <div class="header">
            <div class="header-left">
                <div>
                    <div class="title">质量分析</div>
                    <div class="subtitle">产品质量数据分析与改进建议</div>
                </div>
            </div>
            <div class="header-right">
                <div class="header-icon">
                    <i class="fas fa-search"></i>
                </div>
                <div class="header-icon">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </div>
                <div class="dropdown">
                    <div class="user-dropdown dropdown-trigger">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="user-avatar">
                        <span class="user-name">工程师</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-user"></i>
                            <span>个人资料</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-cog"></i>
                            <span>账号设置</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-question-circle"></i>
                            <span>帮助中心</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-sign-out-alt"></i>
                            <span>退出登录</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-wrapper">
            <!-- 质量评分卡 -->
            <div class="section-title">质量评分</div>
            <div class="quality-scores">
                <div class="quality-score-card">
                    <div class="score-header">
                        <div class="score-title">总体评分</div>
                        <div class="score-badge">A+</div>
                    </div>
                    <div class="score-value">94.7</div>
                    <div class="score-progress">
                        <div class="score-progress-bar" style="width: 94.7%"></div>
                    </div>
                    <div class="score-footer">
                        <div class="score-comparison">
                            <i class="fas fa-arrow-up"></i>
                            <span>较上月提升 2.1%</span>
                        </div>
                        <button class="btn btn-sm btn-secondary">查看详情</button>
                    </div>
                </div>
                
                <div class="quality-score-card">
                    <div class="score-header">
                        <div class="score-title">成分达标率</div>
                        <div class="score-badge">A</div>
                    </div>
                    <div class="score-value">92.3</div>
                    <div class="score-progress">
                        <div class="score-progress-bar" style="width: 92.3%"></div>
                    </div>
                    <div class="score-footer">
                        <div class="score-comparison">
                            <i class="fas fa-arrow-up"></i>
                            <span>较上月提升 1.5%</span>
                        </div>
                        <button class="btn btn-sm btn-secondary">查看详情</button>
                    </div>
                </div>
                
                <div class="quality-score-card">
                    <div class="score-header">
                        <div class="score-title">温度控制</div>
                        <div class="score-badge">A+</div>
                    </div>
                    <div class="score-value">96.8</div>
                    <div class="score-progress">
                        <div class="score-progress-bar" style="width: 96.8%"></div>
                    </div>
                    <div class="score-footer">
                        <div class="score-comparison">
                            <i class="fas fa-arrow-up"></i>
                            <span>较上月提升 3.2%</span>
                        </div>
                        <button class="btn btn-sm btn-secondary">查看详情</button>
                    </div>
                </div>
                
                <div class="quality-score-card">
                    <div class="score-header">
                        <div class="score-title">杂质控制</div>
                        <div class="score-badge">B+</div>
                    </div>
                    <div class="score-value">88.5</div>
                    <div class="score-progress">
                        <div class="score-progress-bar" style="width: 88.5%"></div>
                    </div>
                    <div class="score-footer">
                        <div class="score-comparison">
                            <i class="fas fa-arrow-down"></i>
                            <span>较上月下降 0.8%</span>
                        </div>
                        <button class="btn btn-sm btn-secondary">查看详情</button>
                    </div>
                </div>
            </div>
            
            <!-- 成分分析 -->
            <div class="section-title">成分分析</div>
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-atom"></i>
                        关键成分分布
                    </div>
                    <div class="header-actions">
                        <select class="form-control form-control-sm">
                            <option>普碳钢</option>
                            <option>低合金钢</option>
                            <option>高强钢</option>
                            <option>所有钢种</option>
                        </select>
                    </div>
                </div>
                <div class="card-content">
                    <div class="elements-distribution">
                        <div class="element-item">
                            <div class="element-header">
                                <div class="element-name">碳 (C)</div>
                                <div class="element-range">目标: 0.035% - 0.045%</div>
                            </div>
                            <div class="element-distribution-chart">
                                <div class="chart-placeholder mini">
                                    <div class="element-indicator">
                                        <div class="indicator-bar">
                                            <div class="range-area"></div>
                                            <div class="current-value" style="left: 45%"></div>
                                        </div>
                                        <div class="indicator-labels">
                                            <div>0.030%</div>
                                            <div>0.040%</div>
                                            <div>0.050%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="element-stats">
                                <div class="element-stat">
                                    <div class="stat-label">平均值</div>
                                    <div class="stat-value">0.042%</div>
                                </div>
                                <div class="element-stat">
                                    <div class="stat-label">达标率</div>
                                    <div class="stat-value">93.2%</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="element-item">
                            <div class="element-header">
                                <div class="element-name">硅 (Si)</div>
                                <div class="element-range">目标: 0.20% - 0.35%</div>
                            </div>
                            <div class="element-distribution-chart">
                                <div class="chart-placeholder mini">
                                    <div class="element-indicator">
                                        <div class="indicator-bar">
                                            <div class="range-area"></div>
                                            <div class="current-value" style="left: 65%"></div>
                                        </div>
                                        <div class="indicator-labels">
                                            <div>0.15%</div>
                                            <div>0.25%</div>
                                            <div>0.40%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="element-stats">
                                <div class="element-stat">
                                    <div class="stat-label">平均值</div>
                                    <div class="stat-value">0.28%</div>
                                </div>
                                <div class="element-stat">
                                    <div class="stat-label">达标率</div>
                                    <div class="stat-value">95.8%</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="element-item">
                            <div class="element-header">
                                <div class="element-name">锰 (Mn)</div>
                                <div class="element-range">目标: 0.60% - 0.90%</div>
                            </div>
                            <div class="element-distribution-chart">
                                <div class="chart-placeholder mini">
                                    <div class="element-indicator">
                                        <div class="indicator-bar">
                                            <div class="range-area"></div>
                                            <div class="current-value" style="left: 55%"></div>
                                        </div>
                                        <div class="indicator-labels">
                                            <div>0.55%</div>
                                            <div>0.75%</div>
                                            <div>0.95%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="element-stats">
                                <div class="element-stat">
                                    <div class="stat-label">平均值</div>
                                    <div class="stat-value">0.76%</div>
                                </div>
                                <div class="element-stat">
                                    <div class="stat-label">达标率</div>
                                    <div class="stat-value">91.5%</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="element-item">
                            <div class="element-header">
                                <div class="element-name">磷 (P)</div>
                                <div class="element-range">目标: < 0.025%</div>
                            </div>
                            <div class="element-distribution-chart">
                                <div class="chart-placeholder mini">
                                    <div class="element-indicator">
                                        <div class="indicator-bar">
                                            <div class="range-area"></div>
                                            <div class="current-value" style="left: 40%"></div>
                                        </div>
                                        <div class="indicator-labels">
                                            <div>0.015%</div>
                                            <div>0.025%</div>
                                            <div>0.035%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="element-stats">
                                <div class="element-stat">
                                    <div class="stat-label">平均值</div>
                                    <div class="stat-value">0.022%</div>
                                </div>
                                <div class="element-stat">
                                    <div class="stat-label">达标率</div>
                                    <div class="stat-value">87.3%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 质量趋势 -->
            <div class="section-title">质量趋势</div>
            <div class="charts-container">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                            <i class="fas fa-chart-line"></i>
                            质量指标月度趋势
                        </div>
                        <div class="header-actions">
                            <div class="time-selector">
                                <button class="btn btn-sm btn-primary">近3个月</button>
                                <button class="btn btn-sm btn-secondary">近6个月</button>
                                <button class="btn btn-sm btn-secondary">近1年</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="chart-container">
                            <div class="chart-placeholder">
                                <i class="fas fa-chart-line"></i>
                                <p>质量指标月度趋势图</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                            <i class="fas fa-chart-pie"></i>
                            不合格原因分布
                        </div>
                        <div class="header-actions">
                            <select class="form-control form-control-sm">
                                <option>本月</option>
                                <option>上月</option>
                                <option>近3个月</option>
                            </select>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="chart-container">
                            <div class="chart-placeholder">
                                <i class="fas fa-chart-pie"></i>
                                <p>不合格原因分布图</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 质量改进建议 -->
            <div class="section-title">质量改进建议</div>
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-lightbulb"></i>
                        AI助手建议
                    </div>
                    <button class="btn btn-sm btn-secondary">
                        <i class="fas fa-sync-alt"></i>
                        更新建议
                    </button>
                </div>
                <div class="card-content">
                    <div class="suggestions-list">
                        <div class="suggestion-item">
                            <div class="suggestion-icon high">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                            <div class="suggestion-content">
                                <div class="suggestion-header">
                                    <div class="suggestion-title">优化磷含量控制</div>
                                    <div class="suggestion-priority high">高优先级</div>
                                </div>
                                <div class="suggestion-description">
                                    <p>磷含量达标率仅为87.3%，是当前质量控制的主要瓶颈。建议调整脱磷工艺参数，提高脱磷剂用量，并增加吹氧时间。</p>
                                </div>
                                <div class="suggestion-actions">
                                    <button class="btn btn-sm btn-primary">实施建议</button>
                                    <button class="btn btn-sm btn-secondary">查看详情</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="suggestion-item">
                            <div class="suggestion-icon medium">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <div class="suggestion-content">
                                <div class="suggestion-header">
                                    <div class="suggestion-title">优化终点温度控制</div>
                                    <div class="suggestion-priority medium">中优先级</div>
                                </div>
                                <div class="suggestion-description">
                                    <p>1号转炉终点温度波动较大，建议调整末期供氧速率控制策略，并优化预测模型的温度参数，减少温度过冲现象。</p>
                                </div>
                                <div class="suggestion-actions">
                                    <button class="btn btn-sm btn-primary">实施建议</button>
                                    <button class="btn btn-sm btn-secondary">查看详情</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="suggestion-item">
                            <div class="suggestion-icon low">
                                <i class="fas fa-info-circle"></i>
                            </div>
                            <div class="suggestion-content">
                                <div class="suggestion-header">
                                    <div class="suggestion-title">更新碳含量预测模型</div>
                                    <div class="suggestion-priority low">低优先级</div>
                                </div>
                                <div class="suggestion-description">
                                    <p>现有碳含量预测模型在低碳钢种上存在轻微偏差，建议收集更多低碳钢生产数据，重新训练碳含量预测模型，提高低碳区间的预测精度。</p>
                                </div>
                                <div class="suggestion-actions">
                                    <button class="btn btn-sm btn-primary">实施建议</button>
                                    <button class="btn btn-sm btn-secondary">查看详情</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <script src="scripts/unified.js"></script>
    <script src="scripts/modal-dialog.js"></script>

    <style>
        /* 质量分析页面特有样式 */
        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin: 20px 0 15px;
            color: var(--primary-dark);
            border-left: 4px solid var(--primary);
            padding-left: 10px;
        }
        
        /* 质量评分卡片样式 */
        .quality-scores {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .quality-score-card {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            padding: 20px;
            transition: all 0.3s;
        }
        
        .quality-score-card:hover {
            box-shadow: var(--shadow);
            transform: translateY(-2px);
        }
        
        .score-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .score-title {
            font-weight: 600;
            color: var(--gray-dark);
        }
        
        .score-badge {
            padding: 4px 8px;
            border-radius: 5px;
            background-color: var(--primary);
            color: white;
            font-weight: 700;
            font-size: 14px;
        }
        
        .score-value {
            font-size: 36px;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 10px;
        }
        
        .score-progress {
            height: 8px;
            background-color: rgba(0, 0, 0, 0.05);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 15px;
        }
        
        .score-progress-bar {
            height: 100%;
            background: var(--primary-gradient);
            border-radius: 4px;
        }
        
        .score-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .score-comparison {
            font-size: 13px;
            color: var(--success-color);
            display: flex;
            align-items: center;
        }
        
        .score-comparison i {
            margin-right: 5px;
        }
        
        .score-comparison.down {
            color: var(--danger-color);
        }
        
        /* 成分分析样式 */
        .elements-distribution {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }
        
        .element-item {
            background-color: rgba(0, 0, 0, 0.02);
            border-radius: var(--radius);
            padding: 15px;
        }
        
        .element-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .element-name {
            font-weight: 600;
            color: var(--primary-dark);
        }
        
        .element-range {
            font-size: 12px;
            color: var(--gray);
        }
        
        .element-distribution-chart {
            height: 60px;
            margin-bottom: 15px;
            position: relative;
        }
        
        .chart-placeholder.mini {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
        }
        
        .element-indicator {
            width: 100%;
        }
        
        .indicator-bar {
            height: 8px;
            background-color: rgba(0, 0, 0, 0.05);
            border-radius: 4px;
            position: relative;
            margin-bottom: 5px;
        }
        
        .range-area {
            position: absolute;
            height: 100%;
            background-color: rgba(25, 118, 210, 0.1);
            border-radius: 4px;
            left: 30%;
            width: 40%;
        }
        
        .current-value {
            position: absolute;
            width: 3px;
            height: 16px;
            background-color: var(--primary);
            top: -4px;
        }
        
        .indicator-labels {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: var(--gray);
        }
        
        .element-stats {
            display: flex;
            justify-content: space-between;
        }
        
        .element-stat {
            text-align: center;
        }
        
        .stat-label {
            font-size: 12px;
            color: var(--gray);
            margin-bottom: 3px;
        }
        
        .stat-value {
            font-weight: 600;
            color: var(--primary-dark);
        }
        
        /* 图表容器样式 */
        .charts-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .chart-container {
            height: 300px;
            position: relative;
        }
        
        .chart-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.02);
            border-radius: var(--radius);
        }
        
        .chart-placeholder i {
            font-size: 48px;
            color: var(--gray);
            margin-bottom: 15px;
        }
        
        .chart-placeholder p {
            color: var(--gray);
        }
        
        .time-selector {
            display: flex;
            gap: 5px;
        }
        
        /* 建议列表样式 */
        .suggestions-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .suggestion-item {
            display: flex;
            background-color: rgba(0, 0, 0, 0.02);
            border-radius: var(--radius);
            padding: 20px;
        }
        
        .suggestion-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            flex-shrink: 0;
        }
        
        .suggestion-icon.high {
            background-color: rgba(244, 67, 54, 0.1);
            color: var(--danger-color);
        }
        
        .suggestion-icon.medium {
            background-color: rgba(255, 152, 0, 0.1);
            color: var(--warning-color);
        }
        
        .suggestion-icon.low {
            background-color: rgba(33, 150, 243, 0.1);
            color: var(--info-color);
        }
        
        .suggestion-content {
            flex: 1;
        }
        
        .suggestion-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .suggestion-title {
            font-weight: 600;
            color: var(--primary-dark);
        }
        
        .suggestion-priority {
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .suggestion-priority.high {
            background-color: rgba(244, 67, 54, 0.1);
            color: var(--danger-color);
        }
        
        .suggestion-priority.medium {
            background-color: rgba(255, 152, 0, 0.1);
            color: var(--warning-color);
        }
        
        .suggestion-priority.low {
            background-color: rgba(33, 150, 243, 0.1);
            color: var(--info-color);
        }
        
        .suggestion-description {
            margin-bottom: 15px;
            color: var(--gray-dark);
            font-size: 14px;
            line-height: 1.5;
        }
        
        .suggestion-actions {
            display: flex;
            gap: 10px;
        }
        
        .header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        @media (max-width: 768px) {
            .quality-scores,
            .elements-distribution,
            .charts-container {
                grid-template-columns: 1fr;
            }
            
            .suggestion-item {
                flex-direction: column;
            }
            
            .suggestion-icon {
                margin-bottom: 15px;
            }
            
            .suggestion-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .suggestion-priority {
                margin-top: 5px;
            }
            
            .header-actions {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化下拉菜单
            initDropdowns();
            
            // 为"查看详情"按钮添加点击事件
            const detailButtons = document.querySelectorAll('.btn-secondary');
            detailButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 获取所在卡片的标题
                    let cardTitle = '';
                    if (this.closest('.quality-score-card')) {
                        cardTitle = this.closest('.quality-score-card').querySelector('.score-title').textContent;
                    } else if (this.closest('.suggestion-actions')) {
                        cardTitle = this.closest('.suggestion-content').querySelector('.suggestion-title').textContent;
                    } else {
                        cardTitle = '详情';
                    }
                    
                    // 显示通知
                    showNotification(`正在加载${cardTitle}的详细信息...`, 'info');
                });
            });
            
            // 为"实施建议"按钮添加点击事件
            const implementButtons = document.querySelectorAll('.suggestion-actions .btn-primary');
            implementButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const title = this.closest('.suggestion-content').querySelector('.suggestion-title').textContent;
                    
                    // 显示确认对话框
                    if (confirm(`确定要实施"${title}"建议吗？`)) {
                        showNotification(`已开始实施"${title}"建议`, 'success');
                    }
                });
            });
            
            // 为质量评分卡添加点击事件
            const scoreCards = document.querySelectorAll('.quality-score-card');
            scoreCards.forEach(card => {
                card.addEventListener('click', function(e) {
                    // 如果点击的是按钮，不执行卡片点击事件
                    if (e.target.closest('.btn')) return;
                    
                    const title = this.querySelector('.score-title').textContent;
                    const score = this.querySelector('.score-value').textContent;
                    
                    showNotification(`${title}：${score}分，点击查看趋势图表`, 'info');
                });
            });
            
            // 为成分分析项添加点击事件
            const elementItems = document.querySelectorAll('.element-item');
            elementItems.forEach(item => {
                item.addEventListener('click', function() {
                    const elementName = this.querySelector('.element-name').textContent;
                    showNotification(`正在加载${elementName}的详细分析数据...`, 'info');
                });
            });
            
            // 为下拉选择框添加事件
            const selects = document.querySelectorAll('select.form-control');
            selects.forEach(select => {
                select.addEventListener('change', function() {
                    showNotification(`已切换到${this.value}的数据视图`, 'success');
                });
            });
            
            // 初始化导航菜单项点击事件
            const navItems = document.querySelectorAll('.sidebar-menu a:not(.active)');
            navItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    // 不阻止默认行为，允许页面导航
                });
            });
        });
        
        // 显示通知
        function showNotification(message, type = 'info') {
            // 检查是否存在通知容器
            let container = document.querySelector('.notification-container');
            if (!container) {
                container = document.createElement('div');
                container.className = 'notification-container';
                document.body.appendChild(container);
            }
            
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            
            // 设置图标
            let icon = '';
            switch (type) {
                case 'success':
                    icon = '<i class="fas fa-check-circle"></i>';
                    break;
                case 'warning':
                    icon = '<i class="fas fa-exclamation-triangle"></i>';
                    break;
                case 'error':
                    icon = '<i class="fas fa-times-circle"></i>';
                    break;
                default:
                    icon = '<i class="fas fa-info-circle"></i>';
            }
            
            // 添加内容
            notification.innerHTML = `
                <div class="notification-icon">${icon}</div>
                <div class="notification-message">${message}</div>
                <div class="notification-close"><i class="fas fa-times"></i></div>
            `;
            
            // 添加到容器
            container.appendChild(notification);
            
            // 自动关闭
            setTimeout(() => {
                notification.classList.add('fade-out');
                setTimeout(() => {
                    notification.remove();
                }, 300);
            }, 3000);
            
            // 点击关闭
            notification.querySelector('.notification-close').addEventListener('click', () => {
                notification.classList.add('fade-out');
                setTimeout(() => {
                    notification.remove();
                }, 300);
            });
        }
        
        // 初始化下拉菜单
        function initDropdowns() {
            const dropdownTriggers = document.querySelectorAll('.dropdown-trigger');
            
            dropdownTriggers.forEach(trigger => {
                trigger.addEventListener('click', function() {
                    const dropdown = this.closest('.dropdown');
                    dropdown.classList.toggle('open');
                    
                    // 点击外部关闭下拉菜单
                    document.addEventListener('click', function closeDropdown(e) {
                        if (!dropdown.contains(e.target)) {
                            dropdown.classList.remove('open');
                            document.removeEventListener('click', closeDropdown);
                        }
                    });
                });
            });
            
            // 为下拉菜单项添加点击事件
            const dropdownItems = document.querySelectorAll('.dropdown-item');
            dropdownItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    const text = this.querySelector('span').textContent;
                    
                    if (text === '退出登录') {
                        if (confirm('确定要退出登录吗？')) {
                            window.location.href = 'login.html';
                        }
                    } else {
                        showNotification(`您点击了${text}`, 'info');
                    }
                    
                    // 关闭下拉菜单
                    this.closest('.dropdown').classList.remove('open');
                });
            });
        }
    </script>
</body>
</html> 